<!-- 图片裁剪组件 -->
<template>
  <div class="loading" :class="{'circular': type === 'circular', 'block': type === 'circular'}">
    <div v-if="type === 'circular'" class="circular">
      <span>Loading</span>
    </div>
    <div v-if="type === 'diamond'" class="diamond"></div>
  </div>
</template>

<script setup>
  const props = defineProps({
    type: {
      type: String,
      default: 'circular',
      required: false
    }
  })
</script>

<style lang="less" scoped>
.loading{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .circular{
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 50%;
    border-top: 10px solid #FF9900;
    position: relative;
    animation: a1 2s linear infinite;

    &::before, &::after{
      content: '';
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      top: -10px;
      box-sizing: border-box;
      border-radius: 50%;
    }

    &::before{
      border-top: 10px solid #FF99CC;
      transform: rotate(120deg);
    }
    &::after{
      border-top: 10px solid #CCFF99;
      transform: rotate(240deg);
    }
    >span{
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: lightgray;
      font-size: 13px;
      animation: a2 2s linear infinite;
    }

    @keyframes a1 {
      to{
        transform: rotate(360deg);
      }
    }
    
    @keyframes a2 {
      to{
        transform: rotate(-360deg);
      }
    }
  }
  .diamond{
    position: relative;
    width: 300px;
    height: 200px;
    &::before{
      content: '';
      width: 80px;
      height: 15px;
      background: #575757;
      opacity: 0.7;
      position: absolute;
      top: 100px;
      left: 110px;
      border-radius: 50%;
      animation: shadow 1s linear infinite;
    }
    &::after{
      content: '';
      width: 60px;
      height: 60px;
      background: #e04960;
      position: absolute;
      top: 35px;
      left: 120px;
      border-radius: 3px;
      animation: animate 1s linear infinite;
    }
  }
  @keyframes animate {
    17%{
      border-bottom-right-radius: 3px;
    }
    25%{
      transform: translateY(9px) rotate(22.5deg);
    }
    50%{
      transform: translateY(18px) scale(1,.9) rotate(45deg);
    }
    75%{
      transform: translateY(9px) rotate(67.5deg);
    }
    100%{
      transform: translateY(0) rotate(90deg);
    }
  }
  @keyframes shadow {
    0%,
    100%{
      transform: scale(1,1);
    }
    50%{
      transform: scale(1.2,1);
    }
  }
}
</style>